<template>
  <div class="box">
    <a-tabs type="card-gutter" :editable="true" auto-switch position="top" :animation="true" @tab-click="handelTab"
      @delete="handleDelete" :default-active-key="tabStore.itemPath" :active-key="tabStore.itemPath"
      @contextmenu.prevent.stop="handelMore($event)">
      <!--      :default-active-key="item.path"-->
      <a-tab-pane v-for="item in tabStore.label" :key="item.path" :title="item.name" v-model="tabStore.itemPath">
      </a-tab-pane>
    </a-tabs>
    <div class="more" :class="toggle" :style="style">
      <div class="one">
        <div class="son" @click="handelCloseLeft"><span>关闭左侧</span><icon-caret-left /></div>
        <div class="son" @click="handelCloseRight"><span>关闭右侧</span><icon-caret-right /></div>
        <div class="son" @click="handelCloseAll"><span>关闭全部</span><icon-close-circle :stroke-width="6" /></div>
        <div class="son" @click="handelCloseMore"><span>关闭其他</span><icon-info-circle :stroke-width="6" /></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useTabsStore } from "../store/tabs";
import { RouteLocationRaw, useRouter } from "vue-router";
import { ref, reactive } from 'vue'
import { crus } from "../utils/curmbs";
import { HTMLAttributes } from "vue";

let toggle = ref<string>('hide')

// 接收到path对应文字
const tabStore = useTabsStore()

// 点击tab 跳转
const router = useRouter()
const handelTab = (path: string | number,) => {
  tabStore.itemPath = path
  router.push(path as RouteLocationRaw)
  crus(path as string)
}
// 点击删除
const handleDelete = (key: string | number) => {
  tabStore.deleteTab(key)
  let index = tabStore.index
  router.push(tabStore.label[index - 1].path)
};

// 删除其他
let style = reactive<HTMLAttributes | any>({
  position: 'absolute',
  left: '0',
  top: '0'
})
// 获取鼠标坐标
const handelMore = (e: any) => {
  toggle.value = 'show'
  style.left = (e.pageX - 330) + 'px'
  style.top = (e.pageY - 100) + 'px'
  if (e.target.nodeName !== 'SPAN') {
    toggle.value = 'hide'
  }
  tabStore.clickName = e.target.innerText;
}

// 清空所有tab
const handelCloseAll = () => {
  toggle.value = 'hide'
  tabStore.label = []
}

// 关闭左侧
const handelCloseLeft = () => {
  toggle.value = 'hide'
  let index = tabStore.label.findIndex(item => item.name === tabStore.clickName)
  tabStore.label.splice(index - 1, 1)
}

// 关闭右侧
const handelCloseRight = () => {
  toggle.value = 'hide'
  let index = tabStore.label.findIndex(item => item.name === tabStore.clickName)
  tabStore.label.splice(index + 1, 1)
}

// 关闭其他
const handelCloseMore = () => {
  toggle.value = 'hide'
  tabStore.label = tabStore.label.filter(item => item.name === tabStore.clickName)
  tabStore.itemPath = tabStore.label.filter(item => item.name === tabStore.clickName)[0].path
}

window.addEventListener('contextmenu', () => {
  toggle.value = 'hide'
})
</script>

<style scoped>
.box {
  position: relative;
  margin-left: 3px;
  margin-top: -5px;
}

a-tabs {
  border: none;
  position: absolute;
  top: 0;
  left: 100px;

}

:deep(.arco-tabs-tab) {
  border-radius: 5px !important;
  margin: 0 5px;
}

:deep(.arco-tabs-content) {
  border: none !important;
}

.hide {
  transition: all .3s;
  display: none;
}

.show {
  transition: all .3s;
  display: block;
}

.more {
  border-radius: 10px;
  transition: all .3s;
  width: 150px;
  height: 130px;
  background: #ebf5ff;
  box-shadow: -1px 5px 21px -5px rgba(0, 0, 0, .5);
  opacity: .8;
  z-index: 999 !important;

}

.son {
  height: 20px;
  margin: 10px 0;
  font-size: 15px;
  font-weight: 900;
  width: 100%;
}

.one {
  font-family: "Microsoft YaHei UI", serif;
  margin-top: -21px;
  margin-left: 27px;
  cursor: pointer;
}

span {
  margin-right: 30px;
  margin-left: -10px;
  border-left: 5px solid #5470c6;
  border-radius: 3px;
  padding-left: 10px;
}

span:hover {
  border-left: 5px solid orange;
  color: #aaa;
}
</style>
